FMT2-Java script kit · FMT3-Dynamic Drive
Folding menu tree - Dynamic Drive version
 with left border frameopening in middle frame (page body)top level is staticmodified so the menu is left justified |
GENERAL INSTRUCTIONS: back to Folding Menu Tree
Modify the link informationChange each LINK to the URL address of your first menu (ex: http://www.page.com)
Change each menu name Menu to a real menu name
Left justify the line area you will put the webgem in the left border.Insert code into a Webgem (or Insert HTML)Paste the modified code into one webgem into the left border, but do not put code into a table. Table settings are built into the code and CSB/Trellix can misunderstand. (Webgem/Trellix is the same as Insert > HTML for CSB)
Make sure you load the image files into the webgemDisregard CSB instruction to enter ^WEBCOMPONENTDIR, CSB still uses ^GEMDIR Images available for download.
Set font information: color for the left border in CSB, then adjust the color in the code for your menu items (next to the little folders). (In this example, both were set to YELLOW)(Note: I used arial as my font for everything except the menu which changes to Verdana because of the code. You can see the difference for the words Site Menu and the menu itself.)
Set your link colors in CSB like normal for the left border. In this sample, I have yellow then white when visited
Adjust Menu table width: Wider = make it 200% Thinner = make it 100%I made it 150% so it could be wider than the left border and a scroll would appear.
The margins for the left border: Your choice. Mine are: left=0 right=0 top=4, bottom=0MODIFICATIONS TO CODE by Sam:
added font info - change as needed (Verdana, color, and size)table added to allow row (menu) to be left justified. Adjustable width.
Add ^GEMDIR/ in front of all images (see code below)(requires you to add images of fold.gif, list.gif and open.gif to webcomponent)
LEFT JUSTIFIED CODE used in this example: <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0" VSPACE="0" HSPACE="0" WIDTH="150%">
<Tr><TR ALIGN=LEFT>
<head>
<style>
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ; font-color: #FFFF33; font-family: Verdana; font-size: 8pt; list-style-image:url(^GEMDIR/fold.gif)}
#foldinglist{list-style-image:url(^GEMDIR/list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--
//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
var head="display:''"
img1=new Image()
img1.src="^GEMDIR/fold.gif"
img2=new Image()
img2.src="^GEMDIR/open.gif"
var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}
if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(^GEMDIR/open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(^GEMDIR/fold.gif)"
}
}
}
if (ie4||ns6)
document.onclick=checkcontained
//-->
</script>
</head>
<ul>
<li id="foldheader">My changes</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li id="foldheader">Page 1</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="index.htm" target="TRLX_Middle">Site menu</a></li>
<li><a href="http://samisite.com/test-csb/id102.htm" target="TRLX_Middle">Link 2</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Link 3</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Link 4</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Link 5</a></li>
</ul>
<li id="foldheader">Page 2</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="index.htm" target="TRLX_Middle">Page 1</a></li>
<li><a href="id102.htm" target="TRLX_Middle">Page 2</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Page 3</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Page 4</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Page 5</a></li>
</ul>
</ul>
<li id="foldheader">Fun stuff</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="id30.htm" target="TRLX_Middle">Link 1</a></li>
<li><a href="id102.htm" target="TRLX_Middle">Link 2</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Link 3</a></li>
</ul>
<li id="foldheader">Other</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://samisite.com" target="TRLX_Middle">Link 1</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Link 2</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Link3</a></li>
</ul>
</font>
</Tr>
</table
|
REGULAR CODE: (indented) modified for use in CSB<head>
<style>
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ; font-color: #FFFF33; font-family: Verdana; font-size: 8pt; list-style-image:url(^GEMDIR/fold.gif)}
#foldinglist{list-style-image:url(^GEMDIR/list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--
//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
var head="display:''"
img1=new Image()
img1.src="^GEMDIR/fold.gif"
img2=new Image()
img2.src="^GEMDIR/open.gif"
var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}
if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(^GEMDIR/open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(^GEMDIR/fold.gif)"
}
}
}
if (ie4||ns6)
document.onclick=checkcontained
//-->
</script>
</head>
<ul>
<li id="foldheader">My changes</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li id="foldheader">Page 1</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="index.htm" target="TRLX_Middle">Site menu</a></li>
<li><a href="http://samisite.com/test-csb/id102.htm" target="TRLX_Middle">Link 2</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Link 3</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Link 4</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Link 5</a></li>
</ul>
<li id="foldheader">Page 2</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="index.htm" target="TRLX_Middle">Page 1</a></li>
<li><a href="id102.htm" target="TRLX_Middle">Page 2</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Page 3</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Page 4</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Page 5</a></li>
</ul>
</ul>
<li id="foldheader">Fun stuff</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="id30.htm" target="TRLX_Middle">Link 1</a></li>
<li><a href="id102.htm" target="TRLX_Middle">Link 2</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Link 3</a></li>
</ul>
<li id="foldheader">Other</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://samisite.com" target="TRLX_Middle">Link 1</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Link 2</a></li>
<li><a href="id30.htm" target="TRLX_Middle">Link3</a></li>
</ul>
</font>
|
Notes about this page:
Sample menus - links open to the index or 2 test pagesMenu is placed in left border with gray backgroundAll links open in Middle frame (page body)Menu came from site built by Thomas then modifiedORIGINAL CODES FROM DYNAMIC DRIVE:
Smart Folding Menu Tree Script IE
Last Updated: March 6th, 2002 for NS6 compatibility and code enhancement
Description: A folding menu tree that contains links and sublinks. Click on the folder icon to expand it. Browsers apart from IE 4+ or NS6+ will see the tree fully expanded (degrades well). The menu supports arbitrary nesting of sub-lists, and uses session cookies to give it persistance. In the past, whenever you opened a folder and clicked a link inside, when you returned, the folder reverts back to its initial, closed state. What a waste of time of having to reopen the folder(s) each time you return to view the links inside. Using cookies, this "smart" folder script will actually remember the state of the folder tree when you navigate to another page, so when you come back, it will look just the way you had remembered it to be. If you can't appreciate this feature, you can bet your surfers will!
Note: This persistance feature is only visible in, obviously, cookie enabled IE 4 browsers.
Part 1: head section
<style>
<!--
#foldheader{cursor:pointer;cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--
//Smart Folding Menu tree- By Dynamic Drive (rewritten 03/03/02)
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"
var ns6=document.getElementById&&!document.all
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
function checkcontained(e){
var iscontained=0
cur=ns6? e.target : event.srcElement
i=0
if (cur.id=="foldheader")
iscontained=1
else
while (ns6&&cur.parentNode||(ie4&&cur.parentElement)){
if (cur.id=="foldheader"||cur.id=="foldinglist"){
iscontained=(cur.id=="foldheader")? 1 : 0
break
}
cur=ns6? cur.parentNode : cur.parentElement
}
if (iscontained){
var foldercontent=ns6? cur.nextSibling.nextSibling : cur.all.tags("UL")[0]
if (foldercontent.style.display=="none"){
foldercontent.style.display=""
cur.style.listStyleImage="url(open.gif)"
}
else{
foldercontent.style.display="none"
cur.style.listStyleImage="url(fold.gif)"
}
}
}
if (ie4||ns6)
document.onclick=checkcontained
//-->
</script>
Part 2: body section
<font face="Verdana">
<ul>
<li id="foldheader">News</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.cnn.com">CNN</a></li>
<li><a href="http://www.abcnews.com">ABC News</a></li>
<li><a href="http://www.news.bbc.co.uk">BBC News</a></li>
</ul>
<li id="foldheader">Webmaster</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.freewarejava.com">Freewarejava.com</a></li>
</ul>
<li id="foldheader">Nested Example</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">outer 1</a></li>
<li><a href="http://www.dynamicdrive.com">outer 2</a></li>
<li id="foldheader">Nested</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.dynamicdrive.com">nested 1</a></li>
<li><a href="http://www.dynamicdrive.com">nested 2</a></li>
</ul>
<li><a href="http://www.dynamicdrive.com">outer 3</a></li>
<li><a href="http://www.dynamicdrive.com">outer 4</a></li>
</ul>
</ul>
</font>
<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>